<template>
  <div class="carbon-emission-unplan-box">
    <el-form ref="form" :model="formData" :rules="rules" label-width="100px">
      <template v-for="(item, index) in formList">
        <el-form-item
            :key="`${item.prop}${index}`"
            :style="item.itemStyle || {}"
            :label="item.name"
            :prop="item.prop"
            :class="item.itemClass"
        >
          <component
              :is="item.componentType || 'el-input'"
              v-if="item.prop"
              v-model="formData[item.prop]"
              :clearable="true"
              :class="item.class"
              v-bind="item.attrConfig || {}"
              @change="handlerSelectData(item)"
          >
            <template v-for="option in item.optionList">
              <el-option
                  :key="option.code"
                  :label="option.name"
                  :value="option.code"
              />
            </template>
          </component>
        </el-form-item>
      </template>
    </el-form>
  </div>
</template>

<script>
  import {dictMixin} from '@/mixin/dict'

  export default {
    name: 'AddCarbonEmissionUnplan',
    mixins:[dictMixin],
    props: {
      // 请求参数
      requestParams: {
        type: Object,
        default: () => ({})
      },
      // 弹窗数据
      popData: {
        type: Object,
        default: () => ({})
      },
      // 弹窗配置
      popConfig: {
        type: Object,
        default: () => ({})
      },
      // 弹窗取消
      close: {
        type: Boolean,
        default: false
      },
      // 弹窗确认
      confirm: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        isAdd: true,
        formData: {
          label: '',
          value: '',
          remark: ''
        },
        formList: [
          {
            name: '未规划日期',
            prop: 'unplanDate',
            attrConfig: { placeholder: '请输入未规划日期' }
          },
          {
            name: '项目Id',
            prop: 'sceneProjectId',
            attrConfig: { placeholder: '请输入项目Id' }
          },
          {
            name: '楼栋Id',
            prop: 'sceneEdificeId',
            attrConfig: { placeholder: '请输入楼栋Id' }
          },
        ]
      }
    },
    computed: {
      rules() {
        return {
          // label: [{ required: true, message: '请输入键', trigger: 'blur' }],
          // value: [{ required: true, message: '请输入值', trigger: 'blur' }]
        }
      }
    },
    watch: {
      popData: {
        handler(data) {
          this.isAdd = !data.id
          this.formList.forEach((e) => {
            this.$set(this.formData, e.prop, data[e.prop])
          })
          this.$set(this.formData, 'id', data.id)
        },
        deep: true,
        immediate: true
      },
      confirm() {
        const params = {
          ...(this.formData || {})
        }
        this.submit(params)
      }
    },
    methods: {
      /**
       * change事件
       */
      handlerSelectData(config) {
        const Ref = this.$refs[config.prop]
        if (Ref && config.isClosePop) {
          Ref.dropDownVisible = false
        }
      },
      /**
       * 提交
       */
      submit(params) {
        this.$refs.form.validate(async (valid) => {
          if (valid) {
            const res = await this.$api.carbonEmissionUnplan[
              this.isAdd ? 'add' : 'update'
            ](params)
            if (Number(res.code) === 1000) {
              this.$message.success(`${this.isAdd ? '新增' : '编辑'}成功！`)
              this.$emit('onFinish', 'carbon-emission-unplan-add')
            }
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .carbon-emission-unplan-box {
    color: #333;
    padding: 0 20px;

    ::v-deep .el-form {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      .el-form-item {
        width: calc(50% - 10px);

        &.width100p {
          width: 100%;
        }

        .el-form-item__label {
          color: #666;
          font-size: 14px;
        }

        &.form-sub-title {
          width: 100%;

          .el-form-item__label {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            font-weight: bold;
            color: #333;
            font-size: 16px;
            line-height: 1;

            &::before {
              content: '';
              display: inline-block;
              width: 4px;
              height: 15px;
              background-color: #00858d;
              margin-right: 5px;
            }
          }
        }
      }

      .el-select,
      .el-cascader {
        width: 100%;
      }
    }
  }
</style>
